<template>
  <el-form class="add-event-interaction-data margin-top-16">
    <switch-normal v-model="interactionData.isDimension" label="多维数组" @change="onChangeInteractionData"></switch-normal>
    <el-collapse v-if="interactionData.isDimension" v-model="activeNames">
      <el-button type="primary"  @click.stop="onAddInteractionItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加项</el-button>
      <el-collapse-item v-for="(items, index) in interactionData.dimensionLists" :key="index" :name="index+1" class="list-group-item">
        <template #title>
          第{{index+1}}项<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteInteractionItem({index})"></i>
        </template>
          <el-button type="primary"  @click.stop="onAddInteractionItem(index)" class="margin-10 margin-left-right-16 padding-8"><el-icon><i class="jy-icon-plus"></i></el-icon>增加项</el-button>
          <el-collapse v-model="activeNames" class="margin-left-right-16">
            <el-collapse-item v-for="(option, qIndex) in items"  :name="qIndex+1" :key="qIndex">
              <template #title>
                第{{(qIndex+1)}}项<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteInteractionItem({index, qIndex})"></i>
              </template>
              <add-img-con :url="option.url" :isInteractionData="true" comAttr="dimensionLists" picAttr="url" :index="index" :qIndex="qIndex" :height="100" :isCrop='false' class="margin-left-right-16"></add-img-con>
              <input-normal label="图片地址" v-model="option.url" @change="onChangeInteractionData"></input-normal>
              <add-img-con :url="option.selectedUrl" :isInteractionData="true" comAttr="dimensionLists" picAttr="selectedUrl" :index="index" :qIndex="qIndex" :height="100" :isCrop='false' class="margin-left-right-16"></add-img-con>
              <input-normal label="选中图片地址" v-model="option.selectedUrl" @change="onChangeInteractionData"></input-normal>
              <textarea-normal label="文本" v-model="option.text" @change="onChangeInteractionData"></textarea-normal>
              <textarea-normal label="自定义数据" v-model="option.params" placeholder='{"text":""}' @change="onChangeInteractionData"></textarea-normal>
            </el-collapse-item>
          </el-collapse>
      </el-collapse-item>
    </el-collapse>
    
    <el-collapse v-else v-model="activeNames">
      <el-button type="primary"  @click.stop="onAddInteractionItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加项</el-button>
      <el-collapse-item v-for="(item, index) in interactionData.lists" :key="index" :name="index+1" class="list-group-item">
        <template #title>
          第{{index+1}}项<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteInteractionItem({index})"></i>
        </template>
        <add-img-con :url="item.url" :isInteractionData="true" comAttr="lists" picAttr="url" :index="index" :height="100" :isCrop='false' class="margin-left-right-16"></add-img-con>
        <input-normal label="图片地址" v-model="item.url" @change="onChangeInteractionData"></input-normal>
        <add-img-con :url="item.selectedUrl" :isInteractionData="true" comAttr="lists" picAttr="selectedUrl" :index="index" :height="100" :isCrop='false' class="margin-left-right-16"></add-img-con>
        <input-normal label="选中图片地址" v-model="item.selectedUrl" @change="onChangeInteractionData"></input-normal>
        <textarea-normal label="文本" v-model="item.text" @change="onChangeInteractionData"></textarea-normal>
        <textarea-normal label="自定义数据" v-model="item.params" placeholder='{"text":""}' @change="onChangeInteractionData"></textarea-normal>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script setup lang="ts">
import { useWebControlsStore } from '@/store/web/controls'
import { useWebComponentStore } from '@/store/web/component'
import { INTERACTION_DATA } from '@/const/web/'

const props = defineProps<{ 
  event: IEvent,
  index: number,
}>()

const event = props.event
const useWebControls = useWebControlsStore()
const useWebComponent = useWebComponentStore()

const activeNames = [1]

const interactionData = computed(() => {
  return useWebComponent.currentComponentData!.interactionData
})
const onChangeInteractionData = () => {
  const interactionData = useWebComponent.currentComponentData!.interactionData
  useWebComponent.updateInteractionData(interactionData)
}
const onAddInteractionItem = (index: number) => {
  const interactionData = useWebComponent.currentComponentData!.interactionData
  let item: any | IInteractionItem
  if(interactionData.isDimension) {
    if(index >= 0){
      item = _.cloneDeep(INTERACTION_DATA.lists[0])
    }else{
      item = [_.cloneDeep(INTERACTION_DATA.lists[0])]
    }
  }else{
    item = _.cloneDeep(INTERACTION_DATA.lists[0])
  }
  useWebComponent.addInteractionItem({ index, item })
}
const onDeleteInteractionItem = ({ index, qIndex }) => {
  useWebComponent.deleteInteractionItem({ index, qIndex })
}
</script>